<template>
  <div class="goodsList">
    <div class="content">
      <div class="good-list-box">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          v-model:error="error"
          error-text="服务器累了，点击重新加载"
          finished-text="  "
          offset="500"
          @load="onLoad"
          :key="2"
        >
          <div class="good-list">
            <div
              class="good-item"
              v-for="(value, index) in items"
              :key="index"
              :sku="value.F_ProductId"
              :hei="index"
            >
              <!-- <a class="good-card" :href="'http://www.higuang365.com/wap/product-'+value.F_ProductId+'.html'+($store.state.userInfo.F_Question?'?parents_id='+$store.state.userInfo.F_Question:'')"> -->
              <div
                class="good-card"
                @click="
                  $router.push({
                    path: '/product',
                    query: { id: value.F_ProductId, parents_id: username },
                  })
                "
              >
                <van-image
                  class="product-img lazy-img"
                  lazy-load
                  :src="'http://higuang365.com/' + value.F_pic_url"
                />
                <div class="good-desc">
                  <div class="title">{{ value.F_Name }}</div>
                  <div class="county">
                    <img
                      class="county-icon"
                      v-if="value.F_yuliu2"
                      :src="'http://higuang365.com/' + value.F_yuliu2"
                      alt=""
                    />

                    <div class="county-title">
                      {{ value.F_BrandCountrie }}
                    </div>
                  </div>
                  <div class="price-box">
                    <span class="price"
                      >¥ <span>{{ value.F_BdPrice }}</span></span
                    >
                    <span class="estimate">￥{{ value.F_Price }}</span>
                  </div>

                  <div
                    class="share"
                    @click.stop="
                      addGoodsCart(value.F_yuliu3, value.F_ProductId)
                    "
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";
import { GetTagGoodsList } from "@/api/home";
import { getCookie, addGoodsCart } from "@/lib/ecapi";
export default defineComponent({
  name:'hieleven',
  setup() {
    const data = reactive({
      items: [],
      error: false,
      loading: false,
      finished: false,
      Refresh: false,
      pageNum: 1,
      pageSize:20,
       username: getCookie("S[MEMBER]"),
    });
    const onLoad = async () => {
      const res = await GetTagGoodsList({
        pageNum: data.pageNum,
        pageSize: data.pageSize,
        tag_id: '22',
        strlv: getCookie("MLV"),
      });
      if (!res[0]) {
        data.error = true;
        data.loading = false;
        return;
      }
      data.items.push(...res[1]);
        data.loading = false;
        data.pageNum += 1;
        if (res[1].length < data.pageSize) {
          data.finished = true;
        }
    };
    return { ...toRefs(data), addGoodsCart ,onLoad};
  },
});
</script>

<style lang="scss" scoped>
.goodsList {
  padding: 0 0 3rem;
  .good-list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: calc(100vw - 2rem);
    margin: auto;
  }
  .good-item {
    box-sizing: border-box;
    width: 100%;
    margin: 0.5rem;
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    animation: jello-horizontal 1s both;
    box-shadow: 1px 1px 2px #c1c1c1;
    .good-card {
      height: 100%;
      display: flex;
    }
    .product-img {
      display: block;
      min-width: 12rem;
      width: 12rem;
      height: 12rem;
          border-radius: 1rem;
    overflow: hidden;
    }
    .good-desc {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      flex-grow: 1;
      text-align: left;
      font-size: 1.2rem;
      padding: 1rem 1rem 0;
      position: relative;
      .county {
        display: flex;
        .county-icon {
          width: 2rem;
          height: 100%;
        }
        .county-title {
          color: #999;
          margin-left: 0.5rem;
        }
      }

      .title {
        font-size: 1.3rem;
        // height: 3.2rem;
        line-height: 2rem;
        letter-spacing: 0.5px;
        margin-top: 2px;
        color: #222333;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .price-box{
          background: url('//gw.alicdn.com/tfs/TB1bHoBOKL2gK0jSZFmXXc7iXXa-616-92.png_570x10000.jpg_.webp') no-repeat;
        background-size: 15rem 100%;
        padding: 0 1rem;
      }
      .price {
        font-size: 1.3rem;
        // color: #ff0036;
        color: #fff;
        font-weight: bold;
        line-height: 2.5rem;
        span {
          font-size: 1.7rem;
        }
      }
      .share {
        height: 2.5rem;
        width: 2.5rem;
        position: absolute;
        right: 1rem;
        bottom: 1rem;
        z-index: 10;
        background-color: #ff1f10;
        background-image: none;
        mask: url(//storage.360buyimg.com/tower/babelnode/static/media/i-miaosha-red.e6c30bae.png)
          no-repeat;
        mask-size: 100% 100%;
      }
      .estimate {
        color: #c5c5c5;
        text-decoration: line-through;
        margin-left: 0.5rem;
      }
    }
  }
}
</style>